<template>
  <div class="process-template">
    <div class="process-toolbar">
      <div class="toolbar-btn">
        <el-button type="default" plain @click="setNodeProperty"> 设置属性 </el-button>
        <el-button type="primary" plain @click="saveProcess"> 保存 </el-button>
      </div>
    </div>
    <div class="process-deiver"></div>
    <div class="process-containers" :style="`height:${containerHeight}px`">
      <div class="process-palette">
        <ProcessPalette ref="processPalette" :graph="graph"/>
      </div>
      <div class="process-canvas" ref="canvas">
      </div>
    </div>

    <!-- 设置判断节点链接线属性 -->
    <EdgeProperty :visible.sync="edgePropertyConfig.visible" :graph.sync="edgePropertyConfig.graph" :nodeId="edgePropertyConfig.nodeId"/>
  </div>
</template>
<script>

import { Graph } from "@antv/x6";
import { Selection } from '@antv/x6-plugin-selection'

import ProcessPalette from './palette/index.vue'
import EdgeProperty from './components/EdgeProperty.vue'

import { createCustomeEdge, registerEdge, registerConnector } from './graph-layout/index'
import { graphAddListeningEvent } from './event/index'

export default {
  name: 'Process',
  components: {
    ProcessPalette,
    EdgeProperty
  },
  props: {
    height: {
      type: Number,
      default: ()=> 0
    }
  },
  computed: {
    containerHeight: {
      get() {
        return this.height
      }
    }
  },
  data() {
    return {
      graph: null,
      edgePropertyConfig: {
        visible: false,
        graph: null,
        nodeId: null
      }
    }
  },
  mounted() {
    this.initGraph()
  },
  methods: {
    initGraph() {
      const canvas = this.$refs.canvas;
      this.graph = new Graph({
        container: canvas, // 画布容器
        width: canvas.offsetWidth, // 画布宽
        height: canvas.offsetHeight, // 画布高
        background: false, // 背景（透明）
        snapline: true, // 对齐线
        grid: {
          type: "dot",
          size: 20, // 网格大小 10px
          visible: true, // 渲染网格背景
          args: {
            color: "#a0a0a0", // 网格线/点颜色
            thickness: 2, // 网格线宽度/网格点大小
          },
        },
        translating: {
          restrict: true,
        },
        connecting: {
          snap: false,
          allowBlank: false,
          allowLoop: false,
          highlight: true,
          connector: 'algo-connector',
          connectionPoint: 'anchor',
          anchor: 'center',
          createEdge: ()=>{
            return createCustomeEdge(this.graph)
          }
        },
      });

      // 开启选择
      this.graph.use(new Selection({
        enabled: true,
        multiple: true,
        rubberband: true,
        movable: true,
        showNodeSelectionBox: false,
      }))

      // 节点链接线
      registerEdge()

      // 连接器
      registerConnector()

      // 监听事件
      graphAddListeningEvent(this.graph, this.$refs.processPalette)
    },

    // 添加节点到画布
    drawerNodeToGraph(type, id, x, y, width, height, shape) {
      const node = this.graph.addNode({
        id: id,
        shape: shape,
        x: x - 180,
        y: y - 120,
        width: width,
        height: height,
        attrs: {
          type: type,
          portsNumber: 0
        }
      })
      return {
        node: node,
        graph: this.graph
      }
    },

    // 设置节点属性
    setNodeProperty() {
      const node = this.$refs.processPalette.getSelectNode()
      if(node == null) return
      node.setData({ openProperty: true })

      const nodeType = node.prop('attrs/type')
      if(nodeType && nodeType === 'edge') {
        this.showEdgePropertyDialog(node)
      }
    },

    // 弹出设置判断节点链接线属性
    showEdgePropertyDialog(node) {
      this.edgePropertyConfig.nodeId = node.id
      this.edgePropertyConfig.graph = this.graph
      this.edgePropertyConfig.visible = true
    },

    // 保存流程
    saveProcess() {
      this.$emit('save', this.graph.toJSON())
    }
  }
}
</script>
<style lang="scss" scoped>
.process-template {
  width: 100%;

  .process-toolbar {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .process-deiver {
    width: 100%;
    height: 1px;
    background-color: #409EFF;
    margin-top: 7px;
    margin-bottom: 7px;
  }

  .process-containers {
    padding: 0px;
    margin: 0px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: flex-start;

    .process-palette {
      width: 5%;
      border: 1px solid #cdcdcd;
    }

    .process-canvas {
      height: 100%;
      width: 95%;
      margin-left: 5px;
    }
  }
}
</style>